import {
  Button,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Flex,
  useDisclosure,
  Box,
} from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import useNewUser from '../hooks/useNewUser';


export default function LoadingModal(): JSX.Element {
  const { roomId } = useParams();
  const {  onOpen, isOpen, onClose  } = useDisclosure();
  const [nickname, setNickname] = useState('');
  const { joinRoomHandler } = useNewUser();

  const handleOkClick = (): void => {
    const data = {
      name: nickname,
      roomName: roomId,
    };
    joinRoomHandler(data);
    onClose();
  };
  useEffect(() => {
    onOpen();
  }, []);

  return (
    <Box as="form">
      <Modal isOpen={isOpen} onClose={onClose} size="xl">
        <ModalOverlay />
        <ModalContent maxW="40rem" padding="4">
          <ModalHeader
            fontSize="2xl"
            textAlign="center"
            style={{
              fontSize: '30px',
            }}
          >
            Введите никнейм
          </ModalHeader>{' '}
          <ModalCloseButton />
          <ModalBody>
            <Input
              style={{
                fontSize: '40px',
              }}
              name="name"
              placeholder="Никнейм"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              size="lg"
            />
          </ModalBody>
          <ModalFooter>
            <Flex justifyContent="center" width="100%">
              <Button
                colorScheme="yellow"
                type="submit"
                onClick={handleOkClick}
                size="lg"
                style={{
                  border: '2px solid black',
                  fontSize: '30px',
                }}
              >
                Присоединиться
              </Button>
            </Flex>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
}
